﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>加载各类开放数据（geojso/kml/gpx）</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!--  引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <style type="text/css">
        #map{
            width:100%;
            height:550px;
        }
        #menu{
            width:100%;
            height:20px;         
            padding:5px 0px;
            font-size:14px;
            font-family:"微软雅黑";
            left:10px;
            /*
            color:#000;
            background-color:#4c4e5a;
            filter:alpha(opacity=20);        
            -moz-opacity:0.2;        
            -khtml-opacity: 0.2;        
            opacity: 0.2;  
            */        
        }
    </style>
</head>
<body>
    <div id="menu">
        <label>请选择加载的数据类型</label>
        <select id="type">
            <option selected="selected" value="geojson">geojson</option>
            <option value="kml">kml</option>
            <option value="gpx">gpx</option>
        </select>
    </div>
    <div id="map">
    </div>
    <script type="text/javascript">
        var vectorLayer; //矢量数据图层
        var dataUrl; // 请求数据文件
        var ajaxDataType; //数据类型
        var center; //当前中心点
        var zoom; //当前缩放级数
        var projection = ol.proj.get('EPSG:3857'); //地图投影坐标系
     
        /**
        *矢量几何要素的样式
        */
        var image = new ol.style.Circle({
            radius: 5,
            fill: null,
            stroke: new ol.style.Stroke({ color: 'red', width: 1 })
        });
        var styles = {
            'Point': [new ol.style.Style({
                image: image  //点样式
            })],
            'LineString': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //线的边界样式
                    color: 'green',
                    width: 1
                })
            })],
            'MultiLineString': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //多线的边界样式
                    color: 'green',
                    width: 1
                })
            })],
            'MultiPoint': [new ol.style.Style({
                image: image  //多点的点样式
            })],
            'MultiPolygon': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //多区的边界样式
                    color: 'yellow',
                    width: 1
                }),
                fill: new ol.style.Fill({  //多区的填充样式
                    color: 'rgba(255, 255, 0, 0.1)'
                })
            })],
            'Polygon': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //区的边界样式
                    color: 'blue',
                    lineDash: [4],
                    width: 3
                }),
                fill: new ol.style.Fill({  //区的填充样式
                    color: 'rgba(0, 0, 255, 0.1)'
                })
            })],
            'GeometryCollection': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //集合要素的边界样式
                    color: 'magenta',
                    width: 2
                }),
                fill: new ol.style.Fill({  //集合要素的填充样式
                    color: 'magenta'
                }),
                image: new ol.style.Circle({  //集合要素的点样式
                    radius: 10,
                    fill: null,
                    stroke: new ol.style.Stroke({
                        color: 'magenta'
                    })
                })
            })],
            'Circle': [new ol.style.Style({
                stroke: new ol.style.Stroke({  //圆的边界样式
                    color: 'red',
                    width: 2
                }),
                fill: new ol.style.Fill({  //圆的填充样式
                    color: 'rgba(255,0,0,0.2)'
                })
            })]
        };
        var styleFunction = function (feature, resolution) {
            return styles[feature.getGeometry().getType()]; //根据要素类型设置几何要素的样式
        };

        //实例化Map对象加载地图
        var map = new ol.Map({
            target: 'map', //地图容器div的ID
            //地图容器中加载的图层
            layers: [
            //加载瓦片图层数据
                new ol.layer.Tile({
                      source: new ol.source.OSM() //加载OpenStreetMap在线瓦片服务数据
                })
            ],
            //地图视图设置
            view: new ol.View({
                projection: projection, //设置地图投影坐标系
                center: [0, 0], //地图初始中心点
                zoom: 2 //地图初始显示级别
            })
        });

        /**
        * 将矢量几何要素显示到地图中
        * @param {String} type 数据类型
        * @param {String} data 数据的url地址
        */
        function loadVectData(type, dataUrl) {
            if (vectorLayer != null || vectorLayer == "undefined") { 
                map.removeLayer(vectorLayer);//移除已有矢量图层
            }
            if (type == "geojson") {
                //实例化矢量数据源，用GeoJSON格式的类解析              
//                var vectorSource = new ol.source.Vector({//数据对象可用readFeatures方法读取几何要素
//                    features: (new ol.format.GeoJSON()).readFeatures(data) //读取矢量要素信息
//                });
                var vectorSource = new ol.source.Vector({
                    url: dataUrl,
                    format: new ol.format.GeoJSON()
                });
            }
            else if (type == "kml") {
                //实例化矢量数据源，用KML格式的类解析
                var vectorSource = new ol.source.Vector({
                    url: dataUrl,
                    format: new ol.format.KML()
                });
            }
            else if (type == "gpx") {
                 //实例化矢量数据源，用GPX格式的类解析
                var vectorSource = new ol.source.Vector({
                    url: dataUrl,
                    format: new ol.format.GPX()
                }); 
            }
            //vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6))); //添加单个几何要素
            vectorLayer = new ol.layer.Vector({
                source: vectorSource, //矢量数据源
                style: styleFunction  //样式设置               
            });
            map.addLayer(vectorLayer); //将矢量图层加载到地图中         
        }

        /**
        * 让用户切换数据类型
        * @param {Event} e Change event.
        */
        var typeSelect = document.getElementById('type'); //数据类型
        typeSelect.onchange = function (e) {
            var dataType = typeSelect.value; //当前选择的数据类型
            if (dataType == "geojson") {
                dataUrl = "../data/geojson/countries.geojson"; //geojson格式数据
                center = [0, 0];
                zoom = 2;
            }
            else if (dataType == "kml") {
                dataUrl = "../data/kml/2012-02-10.kml"; //kml格式数据
                center = [876970.8463461736, 5859807.853963373];
                zoom = 10;
            }
            else if (dataType == "gpx") {
                dataUrl = "../data/gpx/fells_loop.gpx"; //gpx格式数据
                center = [-7916041.528716288, 5228379.045749711];
                zoom = 12;
            }
            loadVectData(dataType, dataUrl); //加载数据
            var view = map.getView(); //获取地图视图
            view.setCenter(center); //平移地图
            view.setZoom(zoom); //地图缩放
        };
        loadVectData("geojson", "../data/geojson/countries.geojson"); //默认加载geojson数据
   </script>
</body>
</html>

